<template>
  <mars-dialog
    title="实时监控"
    customClass="base-pannel"
    width="330"
    top="500"
    right="15"
    height="40%"
  >
    <div class="video-container">
      <div class="video-player">
        <video
          ref="videoRef"
          :src="videoSource"
          :poster="posterImage"
          controls
          autoplay
          muted
          loop
          class="video-element"
        ></video>

        <!-- 加载状态提示 -->
        <div v-if="loading" class="loading-overlay">
          <div class="spinner"></div>
          <p>正在加载视频...</p>
        </div>

        <!-- 错误提示 -->
        <div v-if="error" class="error-overlay">
          <i class="fa fa-exclamation-triangle"></i>
          <p>{{ errorMessage }}</p>
          <button @click="retry" class="retry-button">重试</button>
        </div>
      </div>

      <!-- 视频控制按钮 -->
      <div class="video-controls">
        <button @click="playPause" class="control-button">
          <i class="fa" :class="{'fa-play': !isPlaying, 'fa-pause': isPlaying}"></i>
        </button>
        <button @click="toggleFullscreen" class="control-button">
          <i class="fa fa-expand"></i>
        </button>
        <button @click="refreshVideo" class="control-button">
          <i class="fa fa-refresh"></i>
        </button>
      </div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from "vue"
import { useWidget } from "@mars/common/store/widget"
import * as mapWork from "../header/map"
import useLifecycle from "@mars/common/uses/use-lifecycle"


const videoRef = ref<HTMLVideoElement | null>(null)
const videoSource = ref("https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4")
const posterImage = ref("https://picsum.photos/330/200?random=1")
const isPlaying = ref(false)
const loading = ref(true)
const error = ref(false)
const errorMessage = ref("")

// 视频流对接接口函数
const connectVideoStream = (streamUrl: string) => {
  videoSource.value = streamUrl
  loadVideo()
}

// 加载视频
const loadVideo = () => {
  if (!videoRef.value) { return } // 添加花括号

  loading.value = true
  error.value = false

  videoRef.value.src = videoSource.value
  videoRef.value.load()

  videoRef.value.addEventListener("loadeddata", handleVideoLoaded)
  videoRef.value.addEventListener("error", handleVideoError)
}

// 视频加载成功
const handleVideoLoaded = () => {
  loading.value = false
  isPlaying.value = true
}

// 视频加载失败
const handleVideoError = () => {
  loading.value = false
  error.value = true
  errorMessage.value = "视频加载失败，请检查网络连接"
  console.error("Video error:", videoRef.value?.error)
}

// 播放/暂停控制
const playPause = () => {
  if (!videoRef.value) { return } // 添加花括号

  if (videoRef.value.paused) {
    videoRef.value.play()
    isPlaying.value = true
  } else {
    videoRef.value.pause()
    isPlaying.value = false
  }
}

// 全屏控制
const toggleFullscreen = () => {
  if (!videoRef.value) { return } // 添加花括号

  if (!document.fullscreenElement) {
    videoRef.value.requestFullscreen().catch(err => {
      errorMessage.value = `全屏请求失败: ${err.message}`
      error.value = true
    })
  } else {
    document.exitFullscreen()
  }
}

// 刷新视频
const refreshVideo = () => {
  if (!videoRef.value) { return } // 添加花括号

  videoRef.value.load()
  loading.value = true
  error.value = false
}

// 重试加载
const retry = () => {
  loadVideo()
}

onMounted(() => {
  loadVideo()
})

onUnmounted(() => {
  if (videoRef.value) { // 添加花括号
    videoRef.value.removeEventListener("loadeddata", handleVideoLoaded)
    videoRef.value.removeEventListener("error", handleVideoError)
  }
})

watch(videoSource, () => {
  loadVideo()
})
</script>

<style lang="less">
// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

// 透明对话框样式
.mars-dialog {
  .mars-dialog__content {
    background-color: transparent;
    padding: 0;
  }
}

.transparent-dialog {
  .mars-dialog__header {
    background-color: transparent;
    border-bottom: none;
  }
  .mars-dialog__footer {
    background-color: transparent;
    border-top: none;
  }
}

// 视频容器样式
.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

// 视频播放器样式
.video-player {
  flex: 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);

  .video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  // 加载覆盖层
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }
  }

  // 错误覆盖层
  .error-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    i {
      font-size: 36px;
      color: #ff5252;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 15px;
    }

    .retry-button {
      background-color: #4caf50;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: #45a049;
      }
    }
  }
}

// 视频控制按钮
.video-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0 0 12px 12px;

  .control-button {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    i {
      font-size: 16px;
    }
  }
}

// 对话框头部样式
.mars-dialog .mars-dialog__header {
  background-image: url("/img/panel-header1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 50px;

  .mars-dialog__title {
    color: #fff;
    margin-left: 15px;
    line-height: 50px;
  }

  .mars-dialog__close {
    color: #fff;
    line-height: 50px;
  }
}

// 动画
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
